<template>
	<div class="content">
		<top></top>
		<div class="con" v-if="showToggle == '1'" >
			<div class="top-nav">
				<el-button type="" size="small" round @click="$router.back()" ><i class="el-icon-caret-left"></i>返回后退</el-button>
				<!--如果是从投票详情过来的，这里用后退就不能返回赛事大厅-->
				<el-button type="" size="small" round @click="$router.push('/contestHall')">賽事大廳</el-button>
				<el-button type="" size="small" round @click="historyfun">投註記錄<i class="el-icon-caret-right"></i></el-button>
			</div>

			<template >
				<!--文本-->
				<div class="main-info">
					<div class="game-title">{{gameinfo.infoName}}</div>
					<div class="game-team">{{gameinfo.contestMaster}} VS {{gameinfo.contestBranch}}</div>
					<div class="game-time">投注開始：{{gameinfo.startTimeStr}}</div>
					<div class="game-time">投注結束：{{gameinfo.endTimeStr}}</div>
				</div>
				<!--赛事图片-->
				<div class="event-image">
					<img src="/images/footballbg03.jpg" alt="">
				</div>

				<div class="bet-info" v-loading="loading">
					<div class="game-end"  v-if="gameinfo.getFootGameScore">
						<div class="end-title">比賽結果</div>
						<div class="end-score">
							{{ contestResultFlat(gameinfo.getFootGameScore) }}
						</div>
					</div>
					<div class="bet-control" v-else>
						<div class="bet-title">投注選項</div>
						<div class="bet-tab bet-option">
							<div class="box" :class="{'active':select1 == '0'}" @click="select1 = '0'">
								<img class="check" src="@/assets/check.svg" alt="">
								<div class="name">勝</div>
								<div class="odds" v-if="gameinfo.oddsTransform">{{oods(gameinfo.oddsTransform[0])}}</div>
							</div>
							<div class="box" :class="{'active':select1 == '1'}" @click="select1 = '1'">
								<img class="check" src="@/assets/check.svg" alt="">
								<div class="name">平</div>
								<div class="odds" v-if="gameinfo.oddsTransform">{{oods(gameinfo.oddsTransform[1])}}</div>
							</div>
							<div class="box" :class="{'active':select1 == '2'}" @click="select1 = '2'">
								<img class="check" src="@/assets/check.svg" alt="">
								<div class="name">負</div>
								<div class="odds" v-if="gameinfo.oddsTransform">{{oods(gameinfo.oddsTransform[2])}}</div>
							</div>
						</div>
						<div>
							<el-button type="success" @click="refresh()" size="small" icon="el-icon-refresh" circle></el-button>
						</div>
						<div class="bet-row-text">本賽事支持投注幣種:</div>
						<div class="bet-coin">{{bet_info.symbol}}</div>
						<div class="bet-row-text">我的{{bet_info.symbol}}餘額：{{balance}} </div>
						<div class="bet-row-text">投注範圍：<span class="">{{gameinfo.conditions[3]}} ~ {{gameinfo.conditions[2]}} </span></div>
						<div class="bet-input-wrap">
							<input class="bet-input w200 center" v-model="depositAmount" placeholder="輸入投注數" ></input>
						</div>

						<!--<div class="bet-tab bet-amount">-->
						<!--	<div class="box active">-->
						<!--		<div class="name" style="font-size: 18px">{{bet_info.symbol}}</div>-->
						<!--	</div>-->
						<!--</div>-->
					</div>

					<!--按钮-->
					<div class="bet-submit">
						<!--正常-->
						<div class="flex-jc-c" v-if="gameinfo.status == '0'">
							<span  v-if="localBetStatus == '1'">數據同步中...</span>
							<span  v-else>
								<!--														<template v-if="true">-->
								<template v-if="isNowInTheBetTimeRange(gameinfo.startTimeStr,gameinfo.endTimeStr) == true">
									<button class="butt" @click="buttfun">確定投注</button>
								</template>
								<template v-else>
									<button class="butt grey">不在投注時間範圍內</button>
								</template>
							</span>
						</div>
						<!--作廢-->
						<div v-if="gameinfo.status == '3'">
							<div class="c-999 f48 b">已作廢</div>
						</div>
						<!--無效-->
						<div v-if="gameinfo.status == '1'">
							<div class="c-999 f48 b">禁用</div>
						</div>
						<!--結束-->
						<div v-if="gameinfo.status == '2'" class="center">
							<div class="c-999 f48 b">已開獎</div>
							<div style="margin-top: 10px;color: red;">請到右上角「投註記錄」中查看中獎結果</div>
						</div>
						<h3>下面的跳转目标可能要整改</h3>
						<!--1是发起者（可以同时是参与者）-->
						<div class="flex-jc-c"  v-if="userDdentity.type == 1">
							<router-link to="/uc/manageMySponsoredDetail'">
								<span class="butt blue" v-if="gameinfo.status == '0' || gameinfo.status == '1'">查看收益數據</span>
								<span class="butt" v-if="gameinfo.status == '2' || gameinfo.status == '3'">領取質押和收益</span>
							</router-link>
						</div>
						<!--2是参与者-->
						<div class="flex-jc-c"  v-if="userDdentity.type == 2">
							<router-link to="/uc/manageMyInvolvedDetail'">
								<span class="butt blue" v-if="gameinfo.status == '0' || gameinfo.status == '1'">查看收益數據</span>
								<span class="butt" v-if="gameinfo.status == '2' || gameinfo.status == '3'">領取質押和收益</span>
							</router-link>
						</div>

					</div>
				</div>
			</template>
			<!--<div v-else style="text-align: center;">暂无新赛事，敬请期待.......</div>-->
		</div>

		<!--*************************************历史记录*************************************************************-->
		<!--*************************************历史记录*************************************************************-->
		<!--*************************************历史记录*************************************************************-->
		<!--*************************************历史记录*************************************************************-->
		<div class="con" v-else-if="showToggle == '2'">
			<div class="p10 historyMark" @click="showToggle=1">←返回赛事詳情</div>
			<div class="listb" v-if="historyList.length>0">
				<div class="list" v-for="(item,i) in historyList" :key="i">
					<div class="text1">{{item.dwu}}</div>
					<div class="text2">投注時間：{{item.betTime}}</div>
					<div class="text2">投注選項：{{item.betOptionCn}}</div>
					<div class="text2">投注數量： {{ item.betfundsAmount }} ({{item.odds/1000}}倍)</div>
					<!--這裡可以不用顯示狀態-->
					<!--<div class="text2">賽事狀態：{{gameinfo.status}} <span class="c-red">這裡沒有處理</span></div>-->
					<div class="text2">比賽結果：{{contestResultFlat(item.getFootGameScore) }}</div>
					<div>
						投注情況：
						<template v-if="gameinfo.status == '2' ">
								<span v-if="gameinfo.winning == item.purchaseIndex">
									<span v-if="item.isAwarded>0 ">已領取</span>
									<el-button type="success" size="mini" v-else @click="getMoney(item.betid)">恭喜中獎，領取獎金</el-button>
								</span>
							<!--<span v-else>未中獎</span>-->
						</template>
						<template v-else> 未開獎 </template>
					</div>
					<!--作廢-->
					<div  v-if="gameinfo.status == '3'">

						<span v-if="item.isAwarded>0 ">押注已退回</span>
						<el-button type="danger" size="mini" v-else @click="problemUserRefund(item.betid)">賽事已作廢，點擊取回</el-button>
					</div>
				</div>
			</div>
			<div style="text-align: center;" v-else>暫無投註記錄</div>
		</div>
		<footter></footter>
	</div>
</template>

<script>
import top from '@/components/top.vue'
import footter from "@/components/footer.vue"
import { mixins } from '@/mixins/mixins'
import { mixinsUtils } from "@/mixins/mixins.utils";
import { contestMixinsGlobal} from '@/views/contestHall/contest.mixins.global'
import {
	oddsPrecisionToNum,
	encodeParams,
	precisionToNum, msgInterface, smartContractBroadcastCallback, smartContractConfirmCallback,
} from '@/libs/site.utils.js';
import {
	hex2Num,
	doCallback,
	balanceOf,
	trigerSmartContract,
	approve, allowance,
} from '@/libs/tron.lib.js'
import {footContract} from "@/views/manage/js/manage.lib";
import { footballAnalysisServe,  } from "@/views/uc/manage/js/manage.user.lib";
import {
	tronTokenAnalyze,
	tronGameIncomeCalculationList
} from "../uc/manage/js/manage.user.lib";
import {
	apiGameList,
	apiMyBetHistory,
	apiRequestGameTron,
	tronGetGameKeyData,
	tronViewGameBetInfo,
} from "@/views/contestHall/contest.func";


const AUTOREFRESH_LIMIT = 30 * 1000 //定时刷新数据 ,注意这个时长

export default {
	name:'contest',
	components:{top,footter},
	mixins:[mixins,mixinsUtils,contestMixinsGlobal],
	data(){
		return {
			playid            : '',
			loading           : false,
			timerrAutoRefrersh: null,//定时刷新
			showToggle        : '1', //1赛事操作，2，我的记录
			select1           : '0',	//选项状态
			select2           : 0,		//选项状态
			select3           : '999',	//选择币种
			deposit           : [5, 10, 20],	//投注金额
			depositAmount     : "",	//投注金额
			balance           : 0,		//代币余额
			footballContract: footContract,	//足球合约地址(测试网)
			localBetStatus : '0',		//本地投注状态
			//////////////////////复杂数据////////////////////////////////////
			gamePlayList      : [],	//游戏列表
			profit_and_loss   : [],	//赔付列表
			gameinfo: {},
			historyList     : [],		//投注记录
			bet_info:  {decimal: 0, name: "", symbol: "", address: ""},//本赛事支持的投注币种信息
			userDdentity:{},//用于判断投票发起者的数据
		}
	},
	computed:{
		//格式化odds
		oods(){
			return (v)=> oddsPrecisionToNum(v)
		},
		//选择的币种
		choosedCoin(){
			return ""
		}
	},
	created() {
		this.playid = this.$route.params.id
		this.pageInit()
	},

	methods:{
		//初始化
		pageInit(){
			if(!this.sender || this.sender==''){
				console.log('钱包没有初始化，等待重试...')
				setTimeout(() => {
					this.pageInit()
				},1000)
			}else{
				console.log('ok,钱包已经初始化，进行相关数据加载...')
				this.getGamePlayEvent();
				this.AutoRefresh();
			}
		},

		//获取赛事玩法
		getGamePlayEvent () {
			this.loading = true
			let params = {
				act      : 'getGamePlay',
				playId   : this.playid,
				pageIndex: 1,          //分页参数
				pageSize : 100,          //分页参数
				playType : 1,         //当前打开的玩法列表，按不同类型，列做出不同的动态隐藏和显示
				sender   : this.sender,   	//当前用户地址。查询用户身份。0什么都不是，1投票创建者，2投票参与者。供给赛事大厅跳转使用
			}
			apiGameList(params, (res)=> {
				let that = this;
				if(res && res.data){
					if (res.resultFlag == true) {//状态是否正常
						this.userDdentity = res.userDdentity //投票相关的数据判断
						if(res.data.length>0){
							this.gameinfo = res.data[0];//由于使用的是列表接口，所以读取第1个数据
							this.checkDecimal() //加载自定义币种
							this.gameIncomeCalculationList(this.gameinfo.playId);//加载当前盈亏数据，可能用于干嘛
						}else{
							console.log('暂无游戏');
						}
					}else{
						this.$message('error!');
					}
				}else{
					console.log('游戏获取失败');
				}
			});
		},


		//获取支持的币种信息
		checkDecimal() {
			let that = this;
			let bet_decimal = that.bet_info.decimal;
			//先读取币种
			if (!that.bet_info.decimal || parseInt(bet_decimal) <= 0) {
				console.log('正在检查币种信息...');
				tronTokenAnalyze(this.gameinfo.betToken, this.sender, (o)=>{
					that.bet_info = o
					this.funcAfterSupportCoinData()
				})
				//开启递归调用 //这里考虑是否要用递归
				this.contractInfoTime = setTimeout(() => {
					that.checkDecimal()
				}, 5000);
				return;
			} else {//支持的币种信息才能继续下一步
				this.funcAfterSupportCoinData()
			}

		},

		//依赖于加载支持币种后才执行的东西
		funcAfterSupportCoinData () {
			this.viewGamePlayMethod()//重新包装数据
			this.getUserBalance();//加载余额(有依赖支持币种)
		},




		/**
		 * 从区块上读取游戏数据并包装
		 */
		viewGamePlayMethod() {
			let that = this;
			let _curGameInfo = this.gameinfo
			//读取足球关键数据
			tronGetGameKeyData(_curGameInfo.playId).then((rs) => {
				//解析合约返回
				apiRequestGameTron({
					"type": 'viewGamePlayMethod',
					'act': 'returnDataAnalyze',
					"param": rs
				}).then(result => {
					let data = result;
					_curGameInfo.status        = data.data.status;
					_curGameInfo.oddsTransform = data.data.play_odds;
					_curGameInfo.winning       = data.data.winning;

					//最大最小金额，/精度//由于这个方法之前会覆盖整个gameInfo对象，所这里要赋值个conditions出来（有定时器在跑，会不断报错）
					_curGameInfo.conditions = data.data.conditions;
					_curGameInfo.conditions[0] = data.data.conditions[0]
					_curGameInfo.conditions[1] = data.data.conditions[1]
					_curGameInfo.conditions[2] = data.data.conditions[2] / Math.pow(10, that.bet_info.decimal);
					_curGameInfo.conditions[3] = data.data.conditions[3] / Math.pow(10, that.bet_info.decimal);

					//网络读取区块链失败
					if (data.resultFlag != true) {
						return;
					}
					this.loading = false
				});
			});
		},


		//todo 这个要整改。并抽离
		//加载当前盈亏数据，用于下面的判断
		gameIncomeCalculationList(playId) {
			let that = this;
			//0,1,2标识胜平负，按下标传上去
			tronGameIncomeCalculationList(playId, [0, 1, 2]).then((rs) => {
				//解析合约返回（目前使用服务器的接口来解析）
				apiRequestGameTron({
					"type": "gameIncomeCalculationList",
					'act': 'returnDataAnalyze',
					"param": rs
				}).then(result => {
					let data = result;
					if (data.resultFlag != true) {
						return;
					}
					that.funding_data = data.data;
				}).catch(err => {
					console.log(err)
				})
			});
		},



		//判断交易是否会失败。当所有资金都不够赔的时候，就该失败了
		viewTransaction(neednum, index) {
			let that = this;
			//本金+投注金额-抽水-赔付 =资金池
			console.log(that.funding_data)
			//计算投注资金
			let bet_a=0;
			that.funding_data.odds_balances.forEach(i => {bet_a += parseFloat(i)});
			//获取精度
			let decimal_t = Math.pow(10, that.bet_info.decimal);
			let loss_a=parseFloat((that.funding_data.profit_and_loss[this.select1])[1]);
			let pump=parseFloat((that.funding_data.profit_and_loss[this.select1])[3]);


			//本金 + 所有投注资金 = 当前赛事奖池所有资金
			//奖池所有资金 - 赔付资金 = 剩下的资金
			//剩下的资金 > 当前赔付资金 ？ 投进来也可以赔：赔不了限制投注

			let currOdds = this.gameinfo.oddsTransform[index] / 1000;
			//总结：算出赔完后参与的资金，再对于当前赔付资金
			let pool_amout = (parseFloat(that.funding_data.total_amout) + bet_a - pump - loss_a) / decimal_t
			console.log(that.funding_data.total_amout, bet_a, pump, loss_a, pool_amout)

			if (parseFloat(pool_amout) > 0 && parseFloat(pool_amout) < parseFloat(neednum * currOdds)) {
				this.$message.error('投注名额已满，请稍后重试');
				return false;
			}
		},

		//确定投注
		buttfun(item){
			let that    = this
			let playid  = this.playid
			let data1   = ['胜', '平', '负']
			// let neednum = this.deposit[this.select2]
			let neednum = this.depositAmount;

			//游戏页面的输入投注范围判断
			let bet_max_amount = parseFloat(this.gameinfo.conditions[2]);
			let bet_min_amount = parseFloat(this.gameinfo.conditions[3]);

			if(!neednum){
				this.$message.error('没有输入投注数量');
				return false;
			}

			if (parseFloat(neednum) < bet_min_amount || parseFloat(neednum) > bet_max_amount) {
				this.$message.error('请入投注数量范围有误');
				return false;
			}

			let decimal = that.bet_info.decimal
			//是否登录钱包
			if(!this.sender){
				this.$message('请先登录钱包'); return false;
			}
			//限制余额
			if(this.balance < neednum){
				this.$message.error('投注币种余额不足');
				return false;
			}
			//限制名额
			if(this.viewTransaction(neednum, this.select1) == false){
				return false
			}

			//确认
			this.$confirm('你选择了 '+data1[parseInt(this.select1)]+' ,投注数量: '+
				neednum+' ','投注信息',{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				customClass:'footballconfirm',
			}).then(()=>{
				this.localBetStatus = '1'
				let sender  = this.sender
				let gameContract = this.footballContract
				let token   = that.bet_info.address
				let bets    = [this.select1, (neednum * Math.pow(10, decimal))]
				//进行授权判断
				allowance(token,gameContract,sender,(res)=>{
					if (res) {
						let owance = hex2Num(res, decimal);
						if (owance >= neednum*Math.pow(10, decimal)) { //授权过才继续
							let ACTION = '下注('+this.gameinfo.contestMaster+'vs'+this.gameinfo.contestBranch + ')'+ data1[parseInt(this.select1)]
							let ACTION_TITLE =  `(${neednum} ${this.choosedCoin})`
							msgInterface(ACTION, 0, 1);//等待钱包确认
							this.placeABet(
								bets,
								playid,
								token,
								sender,
								smartContractBroadcastCallback(ACTION,ACTION_TITLE,(status,txid)=> {
									setTimeout(() => {
										this.localBetStatus = '0';//恢复状态
										that.getGamePlayEvent();
										this.getUserBalance();
										that.gameIncomeCalculationList(this.gameinfo.playId)
									}, 2000)
									if (status == 1) {
										footballAnalysisServe({}, txid)
									}
								}),
								smartContractConfirmCallback(ACTION,ACTION_TITLE)
							);
						}else{
							this.$confirm('请先授权操作','提示',{
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								customClass:'footballconfirm',
							}).then(()=>{
								// approve(gameContract,token,sender,(res)=>{
								// 	if(res == '1'){
								// 		this.$message.success('授权成功，请继续操作');
								// 	}else{
								// 		this.$message.error('授权失败');
								// 	}
								// 	this.localBetStatus = '0';
								// });
								approve(gameContract, token, sender, smartContractBroadcastCallback('授权操作：',that.bet_info,(status,txid)=> {
									    if(status==1){
										    this.localBetStatus = '0';
									    }
									})
								);
							}).catch(()=>{
								this.localBetStatus = '0';
							})
						}
					}else{
						this.$message('授权查询失败');
						this.localBetStatus = '0';
					}
				});
			}).catch(()=>{});
		},




		//todo 是否可以抽离？可能不同游戏这里的参数不同？
		//用户提交投注
		placeABet(bets, playId, betToken, sender, call,confirmCallback) {
			let token = this.footballContract;
			let func = "userBets(bytes)";
			let parameters = [{
				type: "uint256[]",
				value: bets
			}, {
				type: "uint256",
				value: playId
			}, {
				type: "address",
				value: tronWeb.address.toHex(betToken)
			}];
			console.log('parameters', parameters, betToken)
			let param = encodeParams(parameters);
			let addParameters = "0x" + param;

			trigerSmartContract(token, func, [{
				type: "bytes",
				value: addParameters
			}], sender, (res, txid) => {
				call(res, txid);
			},confirmCallback);
		},

		//获取历史投注记录
		historyfun(){
			let that=this;
			if(!this.sender){
				this.$message('请先登录');
				return false;
			}
			let params  = {
				act        : "loadBetsList",
				page       : 1,
				pageSize   : 30,
				playId     : this.playid,
				userAddress: this.sender,
			}
			apiMyBetHistory(params,(res)=>{
				if(res && res.data){
					this.showToggle = '2';
					let contestIdArr = [];//保存区块上的赛事id
					//如果有数据
					if(res.data.length>0){
						//得出赛事id,作为实时数据的请求参数
						res.data.forEach((item)=>{
							contestIdArr.push(item.betid);
						});
						//数据精度包装处理
						let _resDataWraped =  res.data.map((item)=> {
							item.betfundsAmount     = precisionToNum(item.betfundsAmount,this.bet_info.decimal)//多币种也是转成usdt，所以精度统一用6
							return item
						})
						//如果是第一次显示，或有新的数据，就使用接口的数据
						if(this.historyList.length==0 || this.historyList.length != res.data.length){
							this.historyList = _resDataWraped;
							this.historyTimelyDataWrap(contestIdArr,_resDataWraped)
						}else{
							this.historyTimelyDataWrap(contestIdArr,this.historyList)
						}

					}
				}
			});
		},

		/**
		 * 对历史数据的及时性包装
		 * @param contestIdArr 区块赛事id
		 * @param data 包装数据
		 */
		historyTimelyDataWrap(contestIdArr,toWrapData){
			//从区块链读取实时数据并解析（使用服务器接口）
			this.viewGameBetInfoC(contestIdArr,(res)=>{
				console.log(res)
				/**
				 * 返回的是一个数组，按索引取值：
				 * 0投注金额,
				 * 1是否已领奖[0未领，1已领取],
				 * 2投注选项,
				 * 3投注赔率,
				 */
				if(res.data && res.data.length>0){
					console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>处理历史数据并更新')
					let _wrapResult = toWrapData.map((item,index)=> {
						item.betOption = res.data[index][2] //投注选择，是一个数字
						item.betOptionCn = ['勝','平','負'][res.data[index][2]] //投注选择，是一个数字
						item.isAwarded = res.data[index][1] //领取奖励没
						return item
					})
					this.historyList = _wrapResult //更新包装后的数据
					console.log(this.historyList)
				}
			})
		},

		//从区块读取实时数据并包装
		viewGameBetInfoC(ids,fun) {
			//读取足球关键数据
			tronViewGameBetInfo(ids).then((rs) => {
				//解析合约返回
				apiRequestGameTron({
					"type": "viewGameBetInfo",
					'act': 'returnDataAnalyze',
					"param": rs
				}).then(result => {
					let data = result;
					//网络读取区块链失败
					if (data.resultFlag != true) {
						return;
					}
					doCallback(fun,data);

				});
			});
		},

		// 获取支持币种余额
		getUserBalance() {
			balanceOf(this.bet_info.address,this.sender,(res) => {
				console.log(res)
				this.balance = hex2Num(res, this.bet_info.decimal);
			})
		},

		//todo 是否能抽离?
		//领奖
		getMoney(betid){
			let token = this.footballContract;
			let func = "userClaim(bytes)";
			let sender = this.sender;

			let parameters = [{
				type: "uint256[]",
				value: [betid]
			}];
			let param = encodeParams(parameters);
			let addParameters = "0x" + param;

			msgInterface('领取奖励', 0, 1);//等待钱包确认
			trigerSmartContract(token,func,[{
				type: "bytes",
				value: addParameters
			}],sender,(res)=>{
				if(res == '1'){
					this.$message.success('领取成功');
				}else{
					this.$message('领取失败');
				}
				setTimeout(()=>{
					this.historyfun();
				},1000); //马上刷新
			});
		},


		//todo 是否能抽离?
		//退款
		problemUserRefund(betid){
			let token = this.footballContract;
			let func = "problemUserRefund(bytes)";
			let sender = this.sender;

			let parameters = [{
				type: "uint256[]",
				value: [betid]
			}];
			let param = encodeParams(parameters);
			let addParameters = "0x" + param;

			msgInterface('退回投注', 0, 1);//等待钱包确认
			trigerSmartContract(token,func,[{
				type: "bytes",
				value: addParameters
			}],sender,(res)=>{
				if(res == '1'){
					this.$message.success('操作成功');
				}else{
					this.$message('操作失败');
				}
				setTimeout(()=>{
					this.historyfun();
				},1000); //马上刷新
			});
		},

		//////////////////////////////////////////////////其它/////////////////////////////////////////////////////////////
		//////////////////////////////////////////////////其它/////////////////////////////////////////////////////////////
		//////////////////////////////////////////////////其它/////////////////////////////////////////////////////////////
		refresh () {
			// this.getUserBalance(); //读取余额，没必要，可能会增加请求数，被墙掉
			this.getGamePlayEvent(); //刷新数据
			this.funResetTimestampNow() //刷新一下当前时间，按钮才能显示
		},

		//自动刷新余额
		AutoRefresh(){
			this.timerrAutoRefrersh = setInterval(()=> {
				this.refresh()
			},AUTOREFRESH_LIMIT)
		},

	},
	beforeDestroy(){
		window.clearTimeout(this.contractInfoTime);
		clearInterval(this.timerrAutoRefrersh)
	}
}
</script>

<style lang="less" scoped>

@import '~@res/global.less';
.content{
	min-height: 100vh;background: #6db8cd url('/images/footballbg.jpg') repeat center top;
	.con{
		width: 1100px;minx-height:400px;padding: 10px 0 20px;margin: 10px auto;background-color: #fff;color: #666666;
		border-radius: 20px;box-shadow: 0px 0px 3px 3px #00000000;position: relative;overflow:hidden;
		.top-nav {color:#888;font-size:14px;padding:10px 10px;display: flex;align-items: center;justify-content: space-between;}

		.event-image {margin-top: 10px;display: flex;align-items: center;justify-content: center}
		.event-image img{height:100px;border-radius: 20px;}


		/*信息*/
		.main-info {padding: 0px;text-align: center;}
		.main-info .game-title{padding: 0px 0;font-size: 20px;}
		.main-info .game-team{color:#353535;padding: 5px 0;font-size: 28px;font-weight: 500;}
		.main-info .game-time{color:#999;font-size: 15px;}

		/*控制部分*/
		.bet-info {
			display: flex;align-items: center;flex-direction: column;
			/*结果显示*/
			.game-end{text-align: center}
			.game-end .end-title{font-size:24px;margin-top: 10px;}
			.game-end .end-score{color:#e00;font-size: 32px;font-weight: bold;}

			/*********************控制******************/
			.bet-control{
				color:#999;
				font-size: 14px;
				width:95%;
				max-width:375px;
				text-align: center;
				.bet-title{text-align: center;padding:15px 0px;}
				.bet-coin {color:#ff7800;font-size: 30px;font-weight: bold;}
				.bet-row-text {padding:1px 0;}

				/*tab抽离*/
				.bet-tab {display: flex;align-items: center;justify-content: space-around}
				.bet-tab .box{flex:1;max-width: 90px;height:80px;border-radius:10px;margin:0px 5px;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;}
				.bet-tab .box .check {height:15px; position: absolute;top:7px;right: 7px;display: none}
				.bet-tab .active{}
				.bet-tab .active .check{display: block}

				/*tab选项*/
				.bet-option {}
				.bet-option .box{color: #7f7f7f;border:3px solid #d7d7d7;}
				.bet-option .box .check {}
				.bet-option .box .name{font-size: 25px;font-weight: bold;}
				.bet-option .active{border-color:#0465ee;color:#0465ee!important;}
				.bet-option .active .check{}

				/*tab金额*/
				.bet-amount {}
				.bet-amount .box{background-color: #f3f3f3;}
				.bet-amount .box .check {}
				.bet-amount .box .name{color:#7f7f7f;font-size: 32px;font-weight: bold;font-style:italic;}
				.bet-amount .active{background-color: #0465ee;}
				.bet-amount .active .name{color:#fff;}
				.bet-amount .active .check{}
				//数值输入
				.bet-input-wrap{
					padding:10px 0;
					.flex-jcc();
					.bet-input {
						color:#444444;
						font-size: 18px;
						font-weight: bold;
						background-color: #fff;
						border-radius: 50px;
						border:3px solid #0465ee;
						box-shadow:inset 3px 3px 5px rgba(0,0,0,0.2) ;
						text-align: center;
						height: 42px;line-height: 42px;
					}
				}
			}

			/*按钮*/
			.bet-submit {
				padding-bottom:20px;
				>div{padding:5px 0;}
				.butt{
					color:#fff;background-color: #ff0600;;padding: 14px 40px;;
					border-radius: 50px;display: inline-block;font-size: 20px;font-weight: bold;
					box-shadow:inset 3px 3px 2px rgba(255,255,255,0.5),inset -2px -2px 2px rgba(0,0,0,0.4);
					&.grey{background-color: #666;}
					&.blue{background-color: #0048ff;}
				}
				.butt:active{box-shadow:inset 3px 3px 2px rgba(0,0,0,0.5)}

			}
		}


		.listb .list{padding: 15px 25px;border-bottom:1px solid #eee;}
		.listb .list:not(:last-child){border-bottom: 1px solid #ccc;}
		.listb .list .text1{font-size: 20px;}
		.listb .list .text2{font-size: 14px;}
	}
}



@media screen and (max-width: 1100px)  {
	.content .con{width: auto;margin: 15px;}
}
@media screen and (max-width: 700px)  {
	.content .con .main-info .text{font-size: 16px;}
}
@media screen and (max-width: 500px)  {
	.content .con .bet-info .text3 .list{padding: 10px; width: 50px;}

}
</style>
<style>
.footballconfirm {width: auto;min-width: 320px;}
</style>
